import { Button } from 'antd';
import { create } from 'zustand';

type InitData = {
	num: number;
};
type StoreFn = {
	setNum: () => void;
};

const initialData: InitData = {
	num: 0
};

const useStore = create<InitData & StoreFn>((set) => ({
	...initialData,
	setNum: () =>
		set((state) => ({
			num: state.num + 1
		}))
}));

const TestZustand = () => {
	const num = useStore((state) => state.num);
	console.log('🚀 ~ TestZustand ~ num:', num);

	return (
		<div>
			TestZustand
			<Bar />
		</div>
	);
};

const Bar = () => {
	const setNum = useStore((state) => state.setNum);

	return (
		<Button type="primary" onClick={() => setNum()}>
			+1
		</Button>
	);
};

export default TestZustand;
